<style lang="less">
.upload-image .el-upload--picture-card {
  background: transparent;
  .el-icon-plus {
    color: #fff;
  }
}
</style>
<template>
  <div class="comp-new">
    <el-form ref="newForm" :model="newForm" :label-width="150 + 'px'">
      <template v-if="type == '1'">
        <el-form-item
          label="场所名称："
          prop="name"
          :rules="[{ required: true, message: '请输入场所名称' }]"
        >
          <el-input placeholder="请输入" v-model.trim="newForm.name"></el-input>
        </el-form-item>
        <el-form-item label="容纳人数：" prop="capacity">
          <el-input
            placeholder="请输入"
            v-model.trim="newForm.capacity"
          ></el-input>
        </el-form-item>
      </template>

      <template v-if="type == '2'">
        <el-form-item
          label="物资名称："
          prop="name"
          :rules="[{ required: true, message: '请输入物资名称' }]"
        >
          <el-input placeholder="请输入" v-model.trim="newForm.name"></el-input>
        </el-form-item>
        <el-form-item
          label="物资数量："
          prop="amount"
          :rules="[{ required: true, message: '请输入物资数量' }]"
        >
          <el-input
            placeholder="请输入"
            v-model.trim="newForm.amount"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="物资种类："
          prop="type"
          :rules="[{ required: true, message: '请选择物资种类' }]"
        >
          <el-select class="full" v-model="newForm.materialsType" placeholder="请选择">
            <el-option label="重要物资" :value="1"></el-option>
            <el-option label="一般物资" :value="2"></el-option>
          </el-select>
        </el-form-item>
      </template>

      <template v-if="type == '3'">
        <el-form-item
          label="专家姓名："
          prop="name"
          :rules="[{ required: true, message: '请输入专家姓名' }]"
        >
          <el-input placeholder="请输入" v-model.trim="newForm.name"></el-input>
        </el-form-item>
        <el-form-item
          label="专家年龄："
          prop="age"
          :rules="[{ required: true, message: '请输入专家年龄' }]"
        >
          <el-input placeholder="请输入" v-model.trim="newForm.age"></el-input>
        </el-form-item>
        <el-form-item
          label="专家性别："
          prop="gender"
          :rules="[{ required: true, message: '请选择专家性别' }]"
        >
          <el-select class="full" v-model="newForm.gender" placeholder="请选择">
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="专家电话："
          prop="phone"
          :rules="[{ required: true, message: '请输入专家电话' }]"
        >
          <el-input
            placeholder="请输入"
            v-model.trim="newForm.phone"
          ></el-input>
        </el-form-item>
      </template>

      <template v-if="type == '4'">
        <el-form-item
          label="应急队伍名称："
          prop="name"
          :rules="[{ required: true, message: '请输入应急队伍名称' }]"
        >
          <el-input placeholder="请输入" v-model.trim="newForm.name"></el-input>
        </el-form-item>
        <el-form-item
          label="队伍容纳人数："
          prop="number"
          :rules="[{ required: true, message: '请输入队伍容纳人数' }]"
        >
          <el-input placeholder="请输入" v-model.trim="newForm.number"></el-input>
        </el-form-item>
      </template>

      <template v-if="type == '5'">
        <el-form-item
          label="消防站名称："
          prop="name"
          :rules="[{ required: true, message: '请输入消防站名称' }]"
        >
          <el-input placeholder="请输入" v-model.trim="newForm.name"></el-input>
        </el-form-item>
      </template>

      <template v-if="type !== '3'">
        <el-form-item
          label="经纬度："
          prop="lon"
          :rules="[{ required: true, message: '请选择经纬度' }]"
        >
          <div class="flex">
            <div class="flex-1 mr-10">
              <el-input
                readonly
                placeholder="经纬度"
                type="text"
                :value="coord"
              ></el-input>
            </div>
            <div>
              <el-button type="green" @click="locateAction">定位</el-button>
            </div>
          </div>
        </el-form-item>
        <el-form-item
          label="负责人："
          prop="principal"
          :rules="[{ required: true, message: '请输入负责人' }]"
        >
          <el-input
            placeholder="请输入"
            v-model.trim="newForm.principal"
          ></el-input>
        </el-form-item>
        <el-form-item label="负责人电话：" prop="principalPhone">
          <el-input
            placeholder="请输入"
            v-model.trim="newForm.principalPhone"
          ></el-input>
        </el-form-item>
      </template>

      <el-form-item label="描述：">
        <el-input
          placeholder="请输入"
          type="text"
          v-model.trim="newForm.mark"
        ></el-input>
      </el-form-item>
    </el-form>
    <!-- 定位 start -->
    <el-dialog
      v-if="locationModalVisible"
      :visible.sync="locationModalVisible"
      width="800px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <h2 slot="title" class="fs-18">定位 <small>（点击地图选点）</small></h2>
      <Location
        ref="location"
        :coord="coord"
        :area="unit.areaName"
        type="equipment"
        @save="saveLocation"
        @cancel="locationModalVisible = false"
      >
      </Location>
    </el-dialog>
    <!-- 定位 end -->
  </div>
</template>
<script>
import { mapState } from "vuex";
import Location from "@/components/census/record/Location.vue";
export default {
  name: "newEquipment",
  components: {
    Location,
  },
  props: {
    activeData: {
      type: Object,
      default() {
        return null;
      },
    },
    unit: {
      type: Object,
      default() {
        return {};
      },
    },
    types: {
      type: Number,
    },
  },
  computed: {
    ...mapState(["siteInfos"]),
    coord() {
      if (this.newForm.lon) {
        return this.newForm.lon + "," + this.newForm.lat;
      }
    },
  },
  watch: {
    activeData() {
      this.initForm();
    },
  },
  data() {
    return {
      newForm: {
        lon: "",
        lat: "",
      },
      locationModalVisible: false,
      type: this.$route.query.type || "place",
    };
  },
  created() {
    this.initForm();
  },
  watch: {
    $route(to, from) {
      this.type = to.query.type;
    },
  },
  methods: {
    initForm() {
      if (this.activeData) {
        this.newForm = this.activeData;
      } else {
        if (this.types == 1) {
          this.newForm.businessId = this.unit.id;
          this.newForm.businessName = this.unit.name;
        } else {
          this.newForm.area = this.unit.allid;
          this.newForm.areaName = this.unit.allname;
        }
        this.newForm.type = this.type;
      }
    },

    locateAction() {
      this.locationModalVisible = true;
    },
    saveLocation(coord) {
      this.newForm.lon = coord[0];
      this.newForm.lat = coord[1];
      this.locationModalVisible = false;
    },

    submitAction() {
      this.$refs["newForm"].validate((valid) => {
        if (valid) {
          this.$post('/emergencyCommand/emergencyCommandAddOrUpdate', this.newForm).then(
            (res) => {
              this.loading = false;
              this.$message.success("保存成功");
              this.$emit("success");
            },
            (err) => {
              if (err.msg) {
                this.$message.error(err.msg);
              }
            }
          );
        } else {
          return false;
        }
      });
    },
    cancelAction() {
      this.$emit("cancel");
    },
  },
};
</script>
